<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <LINK href="resourses/style.css" rel="stylesheet" type="text/css">
   <title>Merry Mariachi</title>
   <style>
      body {
         background-image:url('pictures/chipsAndSalsa.jpg');
		 background-repeat:no-repeat;
      }
   </style>
</head>

<!-- ------------------------------------------------------------------- -->
<script>
function winCalculation(){
	//generate random number
	var win = Math.floor(Math.random()*5);
	
	/////check to see if the game has been played here
	var played = false;

	//Calculate if the player is a winner or not
	if(win != 0){
		alert("Sorry, you did not win this time.");
	}
	else if(played == true){
		alert("Congradulations! You win!");
	}
	else {
		alert("Congratulations! You have won a free dessert! The waiter will be by shortly to deliver your prize.");
		/////send an message to the waiter to deliver the coupon to the customer
	}

	/////update that the game has been played
}

function help(){
	alert("A waiter is on the way to help you.");
	/////send a note to the waiters that this tablet needs help
}

function refill(){
	//refill screen popup
	window.open('refillScreen.html','refillWindow','resizable=no, titlebar=no, menubar=no, width=430, height=360, toobar=no');	
}
</script>
<!-- ------------------------------------------------------------------- -->

<body>
<!-- Back Button and Title -->
	<a href="gameScreen.html">
	<button class="backButton" style="float:left">Back</button></a>
	<h1 align="center">Merry Mariachi</h1>	
        <h2 align="center">Select a mariachi to see if you win!</h2>  
 

<!-- Table with the mariachi's to click for the game -->
	<a href="gameScreen.html">
	<table align=left>
        <tr>
            <td><img src="pictures/mariachi1.gif" onclick="winCalculation()"></td>
            <td></td>
            <td><img src="pictures/mariachi3.gif" onclick="winCalculation()"></td>
        </tr>
        <tr>
            <td></td>
            <td><img src="pictures/mariachi2.gif" onclick="winCalculation()"></td>
            <td></td>
        </tr>
        <tr>
            <td><img src="pictures/mariachi3.gif" onclick="winCalculation()"></td>
            <td></td>
            <td><img src="pictures/mariachi1.gif" onclick="winCalculation()"></td>
        </tr>
	</table>
	</a>


<!-- Help and Refill buttons at the bottom. -->
	<div id="pageBottom">
	<button class="footerButton" onclick="help()">Help</button>
	<button class="footerButton" onclick="refill()">Refill</button>
	</div>
</body>
</html>




